<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="明月">
    <title>优酷</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        nav {
            width: 100%;
            height: 50px;
            background-color: #272A27;
        }

        ul {
            list-style: none;
        }

        nav .out {
            width: 600px;
            /* border: 1px solid red; */
            line-height: 50px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .out li a {
            text-decoration: none;
            color: #B8B9AC;
            font-size: 14px;
        }
        .out li .vip{
            color: #947B50;
        }
        .out li a:hover{
            color: #947B50;
        }
       
       .out .watch:hover .watch-a{
            color: #947B50;
        }
        .xiala {
            margin-top: -3px;
            padding: 0;
            background-color: #302E2D;
            display: none;
            position: absolute;
        }

        .xiala li {
            width: 65px;
            height: 35px;
            margin-bottom: 5px;
        }
        .xiala li a{
            display: inline-block;
            width: 65px;
            height: 35px;  
        }
         .xiala li a:hover{
           background-color:#947B50;
            color: #B8B9AC;  
         }
         .watch:hover .xiala{
             display: block;
             
         }
    </style>
</head>

<body>
    <nav>
        <ul class="out">
            <li><a href="#" class="vip">会员首页</a></li>
            <li class="watch">
                <a href="#" class="watch-a">看电影</a>
                <ul class="xiala one">
                    <li><a href="#">华语电影</a></li>
                    <li><a href="#">海外大片</a></li>
                </ul>
            </li>
            <li class="watch">
                <a href="#">看剧</a>
                <ul class="xiala two">
                    <li><a href="#">英剧</a></li>
                    <li><a href="#">美剧</a></li>
                    <li><a href="#">港剧</a></li>
                    <li><a href="#">韩剧</a></li>
                </ul>
            </li>
            <li><a href="#">看动漫</a></li>
            <li><a href="#">纪录片</a></li>
            <li><a href="#">德云社</a></li>
            <li><a href="#">看直播</a></li>
        </ul>
    </nav>

</body>

</html>